import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../../../routes/xin_he_routes.dart';
import '../../../../utils/xh_styles.dart';
import '../../../../utils/xin_he_image.dart';
import '../../../shopping_car/models/xin_he_goods_model.dart';
import 'xin_he_sub_category_logic.dart';

class XinHeSubCategoryPage extends StatelessWidget {
  XinHeSubCategoryPage({Key? key,this.tag}) : super(key: key);

  final logic = Get.put(XinHeSubCategoryLogic());
  final state = Get.find<XinHeSubCategoryLogic>().state;
  final String? tag;

  @override
  Widget build(BuildContext context) {
    if(tag != null){
      var tabIndex = Get.arguments;
      if(tabIndex !=null){
        logic.selectIndex.value = tabIndex;
        logic.changeIndex(tabIndex, '');
      }
    }
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        leading: tag != null? IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ):Container(),
        title: Text('分类',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [

          ///search
          Container(
            padding: EdgeInsets.only(left: 15,right: 15,top: 10,bottom: 12),
            height: 35+22,
            color: Colors.white,
            child: GestureDetector(
              onTap: (){
                Get.toNamed(XinHeRoutes.search);
              },
              child: Container(
                  width: Get.width - 30,
                  decoration: BoxDecoration(color: XinHeColor('#F0F7F8'),borderRadius: BorderRadius.circular(17.5)),
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      XinHeAssetImage('assets/images/home/search_12.png',width: 12,height: 12,fit: BoxFit.fill,),
                      SizedBox(width: 3,),
                      Text('请输入商品名',style: TextStyle(color: XinHeColor('#C3C3C3'),fontSize: 13),)
                    ],)
              ),
            ),

          ),

          Expanded(
            child: Row(children: [
              _leftListView(),
              _rightListView()
            ],),
          )


        ],),
    );
  }

  ///左侧分类列表
  Widget _leftListView() {
    return SizedBox(
      width: 96,
      child: Obx(
            () => Container(
          color: Colors.transparent,
          child: SmartRefresher(
              enablePullDown: true,
              controller: logic.refreshController,
              onRefresh: logic.onRefresh,
              // header: const WaterDropMaterialHeader(
              //   color: Colors.white,
              // ),
              child: ListView.separated(itemBuilder: (context, index){
                return Obx(
                      () => InkWell(
                    onTap: () {
                      logic.changeIndex(
                          index, logic.leftCategoryList[index].toString());
                    },
                    child: Container(
                      // color:
                      // Colors.white, //若是为了设置背景色，也可以在listView外面再包一层container来设置
                      color: logic.selectIndex.value == index
                          ? Colors.white
                          : Colors.transparent,
                      height: 40,
                      child: Stack(
                        alignment: Alignment.centerLeft,
                        children: [
                          Container(
                            width: 2,
                            height: 16,
                            color: logic.selectIndex.value == index
                                ? XinHeStyle.mainGreenColor
                                : Colors.transparent,
                          ),
                          Padding(
                            padding:
                            const EdgeInsets.only(left: 20),
                            child: Text(
                              "${logic.leftCategoryList[index]}",
                              softWrap: false,
                              style: TextStyle(
                                  color: logic.selectIndex.value == index?XinHeStyle.mainGreenColor:XinHeColor('#222222'),
                                  fontWeight:
                                  logic.selectIndex.value == index
                                      ? FontWeight.bold
                                      : FontWeight.normal),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }, separatorBuilder: (ctx,index){
                return Container(height: 20,color: Colors.transparent,);
              }, itemCount: logic.leftCategoryList.length)
          ),
        ),
      ),
    );
  }

  ///右侧分类列表
  Widget _rightListView() {
    return Expanded(
        child: Obx(
              () => Container(
            color: Colors.white,
            child: ListView.builder(
                itemCount: logic.leftCategoryList.length,
                itemBuilder: (ctx,index){
                  return GestureDetector(
                    onTap: (){
                      Get.toNamed(XinHeRoutes.goodsDetail);

                    },
                    child: Stack(
                      children: [
                        Container(
                          color: Colors.white,
                          width: Get.width-96,
                          height: 120,
                          child:  Row(
                            children: [
                              const Padding(
                                padding:  EdgeInsets.only(left: 10,top: 15,right: 15,bottom: 15),
                                child: XinHeAssetImage('assets/images/home/tmp.png',width: 90,height: 90,fit: BoxFit.fill,),
                              ),

                              Padding(
                                padding: EdgeInsets.only(right: 15),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    SizedBox(
                                        width:Get.width-96-10-15-90-15,
                                        child: Text('一级冷榨有机野山茶籽油500ML ',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                                    ),
                                    const SizedBox(height: 16,),
                                    SizedBox(
                                      width: Get.width-96-10-15-90-15,
                                      child: Row(
                                        children: [

                                          RichText(
                                              text: TextSpan(children: [
                                                ///￥
                                                TextSpan(
                                                  text: '￥',
                                                  style: TextStyle(
                                                    color: XinHeColor('#E84128'),
                                                    fontSize: 9,
                                                    fontWeight: FontWeight.w500,
                                                  ),
                                                ),

                                                ///
                                                TextSpan(
                                                  text: '28.83',
                                                  style: TextStyle(
                                                    color: XinHeColor('#E84128'),
                                                    fontSize: 16,
                                                    fontWeight: FontWeight.w500,
                                                  ),
                                                ),

                                              ]
                                              )),
                                          Spacer(),
                                          // GestureDetector(
                                          //   onTap:(){
                                          //     logic.addGoodsToCartAction(XinHeGoodsModel());
                                          //   },
                                          //   child: const Padding(
                                          //     padding: EdgeInsets.only(left: 8),
                                          //     child: XinHeAssetImage('assets/images/home/add.png',width: 22,height: 22,),
                                          //   ),
                                          // ),

                                        ],
                                      ),
                                    )

                                  ],),
                              )


                            ],
                          ),
                        ),

                        Positioned(
                          bottom: 0,
                          right: 0,
                          child: Container(
                            width: Get.width-96-10-90-15,
                            color: XinHeColor('#E7EEEE'),
                            height: 0.5,),
                        )

                      ],
                    ),
                  );
                }
            ),
          ),
        ));
  }
}
